<!--
 * @Author: 李金深 2896583081@qq.com
 * @Date: 2023-07-01 11:52:25
 * @LastEditors: 李金深 2896583081@qq.com
 * @LastEditTime: 2023-07-05 18:15:32
 * @FilePath: /com.huizhouyiren.web.d0101/src/components/contact/contact.vue
 * @Description: 联系人组件
-->
<script setup>
import { ref, watch } from "vue"
import { useChat } from "@/stores/chat"
import { isNull } from "@/utils/check"
import { debounce } from "@/utils/tools"

import VirtualList from "@/components/virtualList/virtualList.vue"
import RecordEmpty from "@/components/defaultGraph/record.vue"
import SelectBox from '@/views/chat/components/selectBox.vue';
import ContactIcon from "@/components/iconSvg/contactIcon.vue"
import { RefreshCircleOutline, CloseSharp } from "@vicons/ionicons5";

const chatStore = useChat()

chatStore.getFriendList()


const props = defineProps({
    multiple: { // 是否是多选模式
        type: Boolean,
        default: true
    },
    color: {
        type: String,
        default: '#FC5073'
    },
    showList: {
        type: Boolean,
        default: true
    },
    placeholder: {
        type: String,
        default: "mall.inputMsg"
    }
    // selectList: {
    //     type: Array,
    //     default: () => {
    //         return []
    //     }
    // }
})
// const emit = defineEmits(['confirm', 'update:selectList'])

let showModal = ref(false)
let keyword = ref("")
let friendItemHeight = 50
let friendNum = 20
let id = ref(null)
let selectList = ref([])
/**
 * @description: 选择用户
 * @return {*}
 */
const selectUser = (item) => {
    if (props.multiple) {
        return
    }
    // selectList.value = []
    // selectList.value.push(item)
    id.value = item.uid + ""
    showModal.value = false
}
/**
 * @description: 点击确认按钮触发的事件
 * @return {*}
 */
const comfirm = () => {
    let list = chatStore.friend.list.filter(item => {
        return item.isSelect
    })
    selectList.value = list
    // emit('update:selectList', list)
    showModal.value = false
}

/**
 * @description: 点击取消按钮
 * @return {*}
 */
const cancel = () => {
    showModal.value = false
}

const removeFunc = (item, index) => {
    item.isSelect = false
    // let list = [...props.selectList]
    selectList.value.splice(index, 1)
    // emit('update:selectList', list)
}

const setInputValue = (value) => {
    id.value = value
}

/**
 * @description: 获取选择的用户（此方法供父组件调用）
 * @return {*}
 */
const getSelectUserList = () => {
    let userObject = {}
    if (!isNull(id.value)) {
        userObject[id.value + ""] = { nickname: id.value, id: id.value, uid: id.value }
    }
    selectList.value.forEach(item => {
        userObject[item.uid + ""] = item
    })
    let list = []
    Object.keys(userObject).forEach(key => {
        list.push(userObject[key])
    })
    chatStore.removeFriendSelect()
    return list
}
/**
 * @description: 数据重置（由父组件调用）
 * @return {*}
 */
const resetData = () => {
    selectList.value = []
    id.value = null
}

defineExpose({
    setInputValue,
    getSelectUserList,
    resetData
})

let friendVirtualList = ref(null)
/**
 * @description: 搜索
 * @return {*}
 */
const searchFunc = () => {
    if (isNull(keyword.value)) {
        chatStore.friendSearchFunc({
            type: 'reset'
        })
    } else {
        let list = []
        list.push(...chatStore.originFiendList)
        let arr = []
        list.forEach(item => {
            if (item && item.nickname) {
                if (item.nickname.toLowerCase().includes(keyword.value.toLowerCase()) || item.uid == keyword.value) {
                    arr.push(item)
                }
            }
        })
        chatStore.friendSearchFunc({
            type: 'search',
            list: arr
        })
    }
    setTimeout(() => {
        console.log(friendVirtualList)
        friendVirtualList.value.setTop(0)
    }, 90);
}


watch(keyword, () => {
    debounce(() => {
        searchFunc()
    }, 400)
})

</script>
<template>
    <div>
        <div class="flex flex-wrap items-center">
            <div class="flex-1 mr-2">
                <n-input type="number" :placeholder="$t(placeholder)" v-model:value="id" style="width: 100%;"></n-input>
            </div>
            <n-button type="primary" strong secondary circle @click="showModal = true">
                <template #icon>
                    <n-icon>
                        <ContactIcon style="transform: scale(1.4);" />
                    </n-icon>
                </template>
            </n-button>
        </div>
        <div class="flex flex-wrap items-center mt-2" v-if="showList">
            <div v-for="(item, index) in selectList" @click="removeFunc(item, index)"
                class="flex items-center cursor-pointer" :key="index" style="
                border-radius: 0.125rem;
                font-size: 14px;
                padding: 0.25rem;
                height: 1.75rem;
                display: flex;
                align-items: center;
                box-sizing: border-box;
                margin-right: 0.625rem;
                margin-bottom: 0.3125rem;
                margin-top: 0.3125rem;
                " :style="{ color, border: `.0625rem solid ${color}70`, background: `${color}20` }">
                <span>{{
                    item.nickname }}</span>
                <CloseSharp :color="color" style="width: 16px;margin-top: 2px;" />
            </div>
        </div>
    </div>
    <n-modal v-model:show="showModal">
        <div class="overflow-hidden bg-white rounded-md" style="width: 400px;">
            <div class="flex items-center justify-center p-4 font-bold border-b border-solid border-borderColor"
                style="height: 3.75rem;">
                {{ $t("menu.contact") }}
            </div>
            <div class="flex justify-center p-4">
                <div style="height: 38px;"
                    class="relative flex items-center w-full pl-2 overflow-hidden border border-solid rounded-md border-primary">
                    <input type="text" style="flex:1;" class="h-full text-sm" :placeholder="$t('profile.searchPlaceholder')"
                        v-model="keyword">
                    <div class="flex justify-center h-full px-2 cursor-pointer bg-primary" @click="keyword = ''">
                        <RefreshCircleOutline style="width: 1.5625rem;" color="#fff" />
                    </div>
                </div>
            </div>
            <div style="height: 20rem;">
                <VirtualList ref="friendVirtualList" :itemHeight="friendItemHeight" :showNum="friendNum"
                    :sourceData="chatStore.friend.list" v-show="chatStore.friend.list.length > 0">
                    <template #default="data">
                        <div :style="{ height: friendItemHeight + 'px' }" class="flex items-center w-full"
                            @click="selectUser(data.item)">
                            <div class="flex items-start w-full px-4 cursor-pointer" style="height:2.5rem;">
                                <div class="relative flex items-center pr-2">
                                    <CustomImage width="2.5rem" roundedClass="rounded-md" :src="data.item.avatar"
                                        bgColor="#323232">
                                    </CustomImage>
                                </div>
                                <div class="flex items-center justify-between flex-1 h-full pr-2">
                                    <div class="flex-1 mr-2 text-sm title_desc">{{ data.item.nickname }}</div>
                                    <SelectBox width="18px" v-if="multiple" v-model:select="data.item.isSelect"
                                        :id="data.item.id"></SelectBox>
                                </div>
                            </div>
                        </div>
                    </template>
                </VirtualList>
                <div class="flex items-center justify-center h-full pb-24" v-if="chatStore.friend.showEmpty">
                    <RecordEmpty :height="200"></RecordEmpty>
                </div>
            </div>
            <div class="flex items-center justify-around py-4 border-t border-solid border-borderColor">
                <n-button type="primary" ghost style="width: 40%;" @click="cancel">{{ $t("system.cancelText") }}</n-button>
                <n-button type="primary" style="width: 40%;" @click="comfirm">{{ $t("system.confirmText") }}</n-button>
            </div>
        </div>
    </n-modal>
</template>